<template>
  <div>
    <div> <!--卡片视图区域-->
      <el-card>
        <el-row>
          <el-col :span="2">
            <el-tag>请选择起止日期</el-tag>
          </el-col>
          <el-col :span="8">
            <el-date-picker
              v-model="datechoose"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :shortcuts="shortcuts"
            >
            </el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-select placeholder="请选择付款状态" v-model="ispay" clearable>
              <el-option label="未付款":value=0></el-option>
              <el-option label="已付款":value=1></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <!--搜索区域-->
            <el-input placeholder="请输入内容">
              <el-button slot="append" icon="el-icon-search" v-on:click="getOrderList"></el-button>
            </el-input>
          </el-col>
        </el-row>
      </el-card>
    </div>
   <div>
     <!--订单表格区域-->
     <el-table :data="orderList" border stripe
               :summary-method="getSummaries">
       <el-table-column type="index" label="#"></el-table-column>
       <el-table-column label="订单编号" prop="scid" width="300px"></el-table-column>
       <el-table-column label="订单价格" prop="cvalue"></el-table-column>
       <el-table-column label="是否付款" prop="ispay">
         <template slot-scope="scope">
           <el-tag type="danger" v-if="scope.row.ispay === 0">未付款</el-tag>
           <el-tag type="success" v-else>已付款</el-tag>
         </template>
       </el-table-column>
       <el-table-column label="课程名称" prop="cname">
         <template slot-scope="scope">
           {{scope.row.cname}}
         </template>
       </el-table-column>
       <el-table-column label="下单时间" prop="buydate" width="140px">
         <template slot-scope="scope">
           <!--通过作用域插槽的形式 调用时间过滤器-->
           {{scope.row.buydate | dataFormat}}
         </template>
       </el-table-column>
       <el-table-column label="操作">
         <template slot-scope="scope">
           <!--修改按钮-->
           <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
           <!--地址按钮-->
           <el-button type="success" size="mini" icon="el-icon-location"></el-button>
         </template>
       </el-table-column>
     </el-table>
   </div>
    </div>
</template>

<script>
    export default {
        data(){
          return {
            orderList:[],
            ispay: '',
            scid: '',
            total: 0,
            //时间选择器
            shortcuts: [{
              text: '最近一周',
              value: (() => {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                return [start, end]
              })(),
            }, {
              text: '最近一个月',
              value: (() => {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                return [start, end]
              })(),
            }, {
              text: '最近三个月',
              value: (() => {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                return [start, end]
              })(),
            }],
            datechoose: ''
          };
        },
        methods:{
          getOrderList(){
            if(this.datechoose === ''){
              this.$axios.get("/getList",{
                params:{
                  scid: this.scid,
                  ispay: this.ispay
                }
              }).then(res =>{
                this.orderList = res.data.data;
                console.log(res.data.data);
              })
            }else {
              this.$axios.get("/getOrderList",{
              params:{
                scid: this.scid,
                ispay: this.ispay,
                startdate: this.datechoose[0],
                enddate: this.datechoose[1]
              }
            }).then(res =>{
              this.orderList = res.data.data;
              console.log(res.data.data);
            })}
          },
          getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
              if (index === 0) {
                sums[index] = '总价';
                return;
              }
              const values = data.map(item => Number(item[column.property]));
              if (!values.every(value => isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                  const value = Number(curr);
                  if (!isNaN(value)) {
                    return prev + curr;
                  } else {
                    return prev;
                  }
                }, 0);
                sums[index] += ' 元';
              } else {
                sums[index] = 'N/A';
              }
            });

            return sums;
          }
        },
      mounted() {
        this.datechoose = '';
        this.getOrderList();
      }
    }
</script>

<style scoped>

</style>
